<template>
  <div id="app">
       <div>
     <!-- 隐藏域 -->
      <span>&emsp;id:</span>
      <input disabled v-model="uid" type="text" />
    </div>
    <div>
      <span>姓名:</span>
      <input v-model="uname"  type="text" />
    </div>
    <div>
      <span>年龄:</span>
      <input v-model="uage" type="number" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="ugender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="add_update">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in arr" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
          <td>
            <button @click="dele(item.id)">删除</button>
            <button @click="upda(item.id)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data(){
      return{
          uid:'',
          uname:'',
          uage:'',
          ugender:'男',
          arr:[{
              id:1,
              name:'Tom',
              age:19,
              gender:'男'
          },
          {
              id:2,
              name:'Jone',
              age:21,
              gender:'女'
          }]
      }
  },
  methods:{
      add_update(){
        // let cunz=  this.arr.some(ele=>ele.name==this.uname)
            if(!this.uname.trim()||!this.uage.trim()){
            alert('有值不能为空！填写完整！')
              this.inputClear()
               return 
            }
        // 判断 如果uid为空则用户是添加
        if(!this.uid){
        let id= this.arr.length<=0?1: this.arr[this.arr.length-1].id+1;
        this.arr.push({
            id:id,
            name:this.uname,
            age:this.uage,
            gender:this.ugender
        })
        // 清空
        this.inputClear()
        }

        // 判断 如果id框不为空 则执行修改
        if(this.uid){
              let index=this.arr.findIndex(ele=>ele.id===this.uid)
              let ele=this.arr[index]
              ele.name=this.uname;
           ele.age=this.uage;
           ele.gender=this.ugender;
           this.inputClear()
        }
      },
     inputClear(){
        // 清空表单
        this.uid=''
       this.uname='';
       this.uage='';
       this.ugender='男'        
    },

    // 编辑 并渲染到输入框
      upda(id){
        //   根据id找到对应的数据
        let index=this.arr.findIndex(ele=>ele.id===id)
        let ele=  this.arr[index]
           this.uid=ele.id;
           this.uname=ele.name;
           this.uage=ele.age;
           this.ugender=ele.gender;
      },

    //   删除 根据id删除对应数据
    dele(id){
         //   根据id找到对应的数据
        let index=this.arr.findIndex(ele=>ele.id===id)
        this.arr.splice(index,1)
        this.inputClear()
    }
  }
}
</script>
<style scoped>
#app{
    width: 380px;
    margin: 0 auto;
}
</style>